<template>
  <div class="main">
    <!-- 检索区,查询表单 -->
    <div class="search">
      <!-- 表单组件 -->
      <el-form
          :inline="true"
          ref="searchFromRef"
          :model="pm"
          class="searchForm"
      >
        <!-- 表单项 -->
        <el-form-item label="项目名称:" style="width: 200px" prop="topicId">
          <el-input placeholder="请输入项目名称" v-model="pm.topicId" />
        </el-form-item>
<!--        预约状态-->
        <el-form-item label="预约状态:" style="width: 200px" prop="projectStatus">
          <el-select v-model="pm.projectStatus" placeholder="请选择预约状态">
            <el-option
                v-for="(item, index) in appointmentStatus"
                :key="index"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

      </el-form>

      <!-- 按钮 -->
      <el-button
          color="#909399"
          plain
          :icon="Search"
          @click="search"
          style="width: 75px"
      >查询</el-button
      >
      <el-button
          color="#e6a23c"
          plain
          :icon="Refresh"
          @click="resetSearch"
          style="width: 75px"
      >重置</el-button
      >
    </div>

    <!-- 数据展示区 -->
    <div class="data">
      <!-- 数据展示区 -->
      <div class="grid">
        <el-row :gutter="20">
          <el-col
              v-for="(item, index) in tableData"
              :key="index"
              :span="8"
          >
            <el-card shadow="hover" style="margin-bottom: 10px">
              <div class="card-header">
                <span class="project-name">{{ item.researchProjects.projectName }}</span>
                <span class="project-leader">导师编号: {{ item.researchProjects.projectLeaderId }}</span>
              </div>
              <div class="project-introduction">
                {{ item.researchProjects.projectIntroduction }}
              </div>
              <div class="project-details">
                <span class="date-time">开始时间: {{ item.researchProjects.projectStartTime }} &nbsp;&nbsp;&nbsp;&nbsp; 结束时间: {{ item.researchProjects.projectEndTime }}</span>
                <span class="participation">已报人数: {{ item.researchProjects.studentParticipationCount }}</span>
              </div>
              <div class="project-actions">
<!--                <el-button-->
<!--                    :class="statusMap[item.researchProjects.projectStatus].type"-->
<!--                    plain-->
<!--                >-->
<!--                  {{ statusMap[item.researchProjects.projectStatus].text }}-->
<!--                </el-button>-->
                <el-button
                    :class="statusMap02[item.isConfirmed].type"
                    plain
                >
                  {{ statusMap02[item.isConfirmed].text }}
                </el-button>
                <!-- 提交报告按钮 -->
                <el-button
                    v-if="item.isConfirmed === 1 && item.status === 0"
                    color="#409eff"                    style="width: 85px"
                    @click="edit(item)"
                    plain
                >提交报告</el-button>
<!--                修改报告按钮-->
                <el-button
                    type="primary"
                    v-if="item.isConfirmed === 1 && item.status === 1"
                    color="#67C23A"                    style="width: 85px"
                    @click="editReport(item)"
                    plain
                >
                  修改报告
                </el-button>
                <!--              查看评价-->
                <!-- 查看报告按钮 -->
                <el-button
                    type="primary"
                    v-if="item.isConfirmed === 1 && item.status !== 0"
                    color="#409EFF"
                    style="width: 85px; margin-right: 10px"
                    @click="viewReport(item)"
                    plain
                >
                  查看报告
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
            v-model:current-page="pageInfo.pageNum"
            v-model:page-size="pageInfo.size"
            :page-sizes="[10, 15, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            background
            @size-change="paginate"
            @current-change="paginate"
        />
      </div>
    </div>
  </div>
  <!-- 实验报告表单对话框 -->
  <el-dialog
      v-model="show"
      :title="title"
      width="800px"
      draggable
      :close-on-click-modal="false"
      @close="close"
      class="report-dialog"
  >
    <el-form
        ref="sfRef"
        :model="pfm"
        :rules="rules"
        label-width="100px"
        class="report-form"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 标题 -->
          <el-form-item label="实验标题：" prop="reportTitle">
            <el-input
                v-model="pfm.reportTitle"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 3 }"
                placeholder="请输入实验标题"
                resize="none"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <!-- 实验目的 -->
          <el-form-item label="实验目的：" prop="reportPurpose">
            <el-input
                v-model="pfm.reportPurpose"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5 }"
                placeholder="请输入实验目的"
                resize="none"
            />
          </el-form-item>

          <!-- 实验步骤 -->
          <el-form-item label="实验步骤：" prop="reportStep">
            <el-input
                v-model="pfm.reportStep"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8 }"
                placeholder="请输入实验步骤"
                resize="none"
            />
          </el-form-item>

          <!-- 实验结果 -->
          <el-form-item label="实验结果：" prop="reportResult">
            <el-input
                v-model="pfm.reportResult"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8 }"
                placeholder="请输入实验结果"
                resize="none"
            />
          </el-form-item>

          <!-- 实验结论 -->
          <el-form-item label="实验结论：" prop="reportConclusion">
            <el-input
                v-model="pfm.reportConclusion"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5 }"
                placeholder="请输入实验结论"
                resize="none"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 对话框按钮，#插槽: 组件空出来，允许用户更改组件内容。由组件使用者定义 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 查看报告信息 对话框 -->
  <!-- 查看报告的对话框 -->
  <el-dialog
      v-model="viewDialogVisible"
      :title="'查看报告详情'"
      width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
  >
    <div class="report-content">
      <el-descriptions
          :column="1"
          border
      >
        <el-descriptions-item label="报告标题">
          {{ reportDetail.reportTitle }}
        </el-descriptions-item>
        <el-descriptions-item label="实验目的">
          {{ reportDetail.reportPurpose }}
        </el-descriptions-item>
        <el-descriptions-item label="实验步骤">
          <div class="content-text">{{ reportDetail.reportStep }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="实验结果">
          <div class="content-text">{{ reportDetail.reportResult }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="实验结论">
          <div class="content-text">{{ reportDetail.reportConclusion }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <div class="status-badge" :class="getStatusClass(reportDetail.reviewStatus)">
            <i :class="getStatusIcon(reportDetail.reviewStatus)"></i>
            {{ reportDetail.reviewStatus }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="审核意见">
          {{ reportDetail.reviewComments }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
    <span class="dialog-footer">
      <el-button @click="viewDialogVisible = false">关闭</el-button>
    </span>
    </template>
  </el-dialog>


</template>

<script setup>
import topicSelectionRecordsApi  from "@/api/TopicSelectionRecordApi.js";
import {computed, reactive, ref, watch} from "vue";
import { onMounted, toRaw, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import  userNameApi from "@/api/userNameApi";
import dayjs from "dayjs"; // 用于日期处理
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Refresh,
  Plus,
} from "@element-plus/icons-vue";
import adminApi from "@/api/AdminApi.js";
import experimentReportsApi from "@/api/ExperimentReportsApi.js";

// 定义状态映射
const statusMap = {
  '进行中': { type: 'custom-primary', text: '进行中' },
  '未开始': { type: 'custom-info', text: '未开始' },
  '已完成': { type: 'custom-success', text: '已完成' },
  '已取消': { type: 'custom-danger', text: '已取消' }
};

// 定义状态映射
const statusMap02 = {
  '-1': { type: 'custom-danger', text: '未预约通过' },
  '0': { type: 'custom-info', text: '预约中' },
  '1': { type: 'custom-success', text: '预约成功' },
  '2': { type: 'custom-warning', text: '结束' }
};
// 取出缓存中的内容userNameApi.get()
const userName = getUserName();
function getUserName() {
  return userNameApi.get();
}
//当组件挂载结束之后调用
onMounted(() => {
  search();
  document.title = "植物表型数据管理系统";
});

//响应式对象
const tableData = ref([]);
function paginate() {
  search();
}

// 分页信息
const pageInfo = ref({
  pageNum: 1,
  size: 10,
  total: 0,
});

// 当页码和页码大小改变时触发

function search() {
  let params = pm.value; // 查询条件

  topicSelectionRecordsApi
      .findAll(pageInfo.value.pageNum, pageInfo.value.size, params)
      .then((result) => {
        if (result.code == 200) {
          tableData.value = result.data.records;
          pageInfo.value.total = result.data.total;
          pageInfo.value.pageNum = result.data.pages;
          pageInfo.value.size = result.data.size;
        }
      });
}

// 搜索条表单双向数据绑定
const pm = ref({
  topicId: "",
  isConfirmed: "",
});

// // 表单实例的引用
let searchFromRef;
function resetSearch() {
  // 重置查询表单
  searchFromRef.resetFields();
}
// 定义表格实例
let tableRef;
//当点击表格时触发
function rowClick(row) {
  tableRef.toggleRowSelection(row);
}


// 对话框是否显示
const show = ref(false);

// 定义对话框内容
const pfm = ref({
  reportTitle: "",
  reportContent: "",
  topicId: "",
  reportPurpose: "",
  reportStep: "",
  reportResult: "",
  reportConclusion: "",
});

// 对话框标题
const title = ref("提交报告");
const isEdit = ref(false);


//编辑方法
// 编辑方法
function editReport(row) {
  isEdit.value = true;
  title.value = '修改报告';
  // 调用API获取报告详情
  experimentReportsApi.getReportDetail(row.topicId).then((resp) => {
    if (resp.code === 200) {
      pfm.value = {
        ...pfm.value,
        ...resp.data,
        topicId: row.topicId
      };
      show.value = true;
    } else {
      ElMessage({
        type: "error",
        message: resp.msg || "获取报告详情失败",
      });
    }
  });
}

// 修改提交表单方法
function submitForm() {
      const project = pfm.value;
      console.log(project);
      if (isEdit.value) {
        submitEdit(project);
      } else {
        submitAdd(project);
      }
}

// 分离提交新增和修改的方法
function submitAdd(project) {
  experimentReportsApi.save(project).then((resp) => {
    handleSubmitResponse(resp);
  });
}

function submitEdit(project) {
  experimentReportsApi.update(project).then((resp) => {
    handleSubmitResponse(resp);
  });
}
// 处理提交响应
function handleSubmitResponse(resp) {
  if (resp.code === 200) {
    ElMessage({
      type: "success",
      message: isEdit.value ? "修改成功" : "提交成功",
    });
    search();
    close();
  } else {
    ElMessage({
      type: "error",
      message: resp.msg,
    });
  }
}

// 关闭对话框时重置表单
function close() {
  sfRef.value?.resetFields();
  pfm.value = {
    reportTitle: "",
    reportContent: "",
    topicId: ""
  };
  isEdit.value = false;
  show.value = false;
}


let sfRef;

// 修改操作
function edit(row) {
  let plant = toRaw(row);
  // 浅拷贝
  row = Object.assign({}, plant);
  show.value = true;
  title.value = "提交报告";
  // 下一个时间滴答中赋值
  nextTick(() => {
    pfm.value.topicId = row.topicId; //给新增/修改表单赋值
  });
}


//表头样式
function headerCellStyle() {
  return {
    background: " #f4f4f5",
    textAlign: "center",
    color: "#909399",
  };
}

// 切换状态
function switchChange2(row) {
  let project = toRaw(row);
  user.locked = user.locked === true ? 0 : 1;
  topicSelectionRecordsApi.updataByState(project).then((resp) => {
    if (resp.code == 200) {
      ElMessage({
        type: "success",
        message: "修改成功",
      });
      // project.locked = project.locked === 0 ? 1 : 0;
      search();
    } else {
      ElMessage({
        type: "error",
        message: resp.msg,
      });
    }
  });
}

//头像上传成功时的回调函数
function avatarSuccess(resp, file) {
  if (resp.code == 200) {
    pfm.value.imagePath = resp.data;
  }
}

// 定义自定义验证规则：开始时间必须大于当前时间
const validateStartTime = (rule, value, callback) => {
  const now = dayjs().format("YYYY-MM-DD");
  if (value && dayjs(value).isBefore(now)) {
    callback(new Error("开始时间必须大于当前时间"));
  } else {
    callback();
  }
};

// 定义自定义验证规则：开始时间不能大于结束时间
const validateEndTime = (rule, value, callback) => {
  const startTime = pfm.value.projectStartTime;
  if (startTime && value && dayjs(startTime).isAfter(value)) {
    callback(new Error("开始时间不能大于结束时间"));
  } else {
    callback();
  }
};
// 表单验证规则
const rules = {
  projectName: [
    {
      required: true,
      message: '请输入实验名称',
      trigger: 'blur',
    },
  ],
  projectStartTime: [
    {
      required: true,
      message: '请选择开始时间',
      trigger: 'change',
    },
    { validator: validateStartTime, trigger: 'change' },
  ],
  projectEndTime: [
    {
      required: true,
      message: '请选择结束时间',
      trigger: 'change',
    },
    { validator: validateEndTime, trigger: 'change' },
  ],
  projectStatus: [
    {
      required: true,
      message: '请选择项目状态',
      trigger: 'change',
    },
  ],
  studentParticipationCount: [
    {
      required: true,
      message: '请输入实验人数',
      trigger: 'blur',
    },
  ],
};
//预约状态的集合是否确认 如果是1 则确认，0 则待确认 -1 则被拒绝
const appointmentStatus = [
  { label: '未通过', value: '-1' },
  { label: '审核中', value: '0' },
  { label: '进行中', value: '1' },
  { label: '已结束', value: '2' },
];

// 状态样式映射方法
const getStatusClass = (status) => {
  const statusMap = {
    '待审核': 'status-pending',
    '审核通过': 'status-success',
    '审核未通过': 'status-error',
    '草稿': 'status-draft'
  }
  return statusMap[status] || 'status-default'
}

// 展示查看详情对话框
// 查看报告相关的状态
const viewDialogVisible = ref(false)
const reportDetail = ref({})

// 查看报告方法
function viewReport(row) {
  // 调用API获取报告详情
  experimentReportsApi.getReportDetail(row.topicId).then((resp) => {
    if (resp.code === 200) {
      reportDetail.value = resp.data
      viewDialogVisible.value = true
    } else {
      ElMessage({
        type: "error",
        message: resp.msg || "获取报告详情失败",
      })
    }
  })
}

// 关闭对话框时重置数据
watch(viewDialogVisible, (newVal) => {
  if (!newVal) {
    reportDetail.value = {}
  }
})

// 状态图标映射方法
const getStatusIcon = (status) => {
  const iconMap = {
    '待审核': 'el-icon-time',
    '审核通过': 'el-icon-check',
    '审核未通过': 'el-icon-close',
    '草稿': 'el-icon-edit-outline'
  }
  return iconMap[status] || 'el-icon-info'
}
</script>

<style scoped>

.demo-form-inline {
  display: flex;
  align-items: center;
}
/* 定义不同状态下的 CSS 类 */
.el-switch-enabled {
  --el-switch-on-color: #13c75b;
  --el-switch-off-color: #13c75b;
}
.el-switch-disabled {
  --el-switch-on-color: #f56c6c;
  --el-switch-off-color: #f56c6c;
}
.pagination {
  margin-top: 20px;
}
.search {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.search > form .el-form-item {
  flex-grow: 1;
  margin-right: 10px;
  margin-bottom: 0;
}
.action {
  margin-top: 10px;
  width: 100%;
  display: flex;
  padding: 10px 0;
  border-radius: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.dialog-footer {
  margin-top: 20px;
}
.data {
  margin-top: 5px;
  padding: 15px 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}


.avatar {
  width: 120px;
  height: 120px;
  border: 1px solid #ccc;
}

.avatar .icon {
  width: 120px;
  height: 120px;
}

.avatar .preview {
  width: 120px;
  height: 120px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.row-avatar {
  width: 50px;
  height: 50px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
  border-radius: 50%; /* 设置为50%使头像为圆形 */
  overflow: hidden; /* 防止图片在圆外显示 */
}
/*卡片修饰*/
.grid {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.project-name {
  font-weight: bold;
  font-size: 16px;
}

.project-leader {
  font-size: 14px;
}

.project-introduction {
  height: 4em;
  margin-bottom: 10px;
  margin-top: 5px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-details {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

.project-details span {
  display: block;
  margin-bottom: 5px;
}

.project-details .participation {
  display: inline-block;
  font-size: 15px;
  margin-right: 10px; /* 可选：添加间距 */
}

.project-details .date-time {
  font-size: 14px; /* 字体小一点 */
  color: #999; /* 颜色浅一点 */
}

.project-actions {
  text-align: right;
}

/* 自定义按钮颜色 */
.custom-primary {
  background-color: #b388ff; /* 浅紫色 */
  border-color: #b388ff;
  color: #fff;
}

.custom-info {
  background-color: #64ffda; /* 浅青绿色 */
  border-color: #64ffda;
  color: #fff;
}

.custom-success {
  background-color: #ffc107; /* 浅橙色 */
  border-color: #ffc107;
  color: #fff;
}

.custom-danger {
  background-color: #ff5722; /* 浅红色 */
  border-color: #ff5722;
  color: #fff;
}
/*美化*/
.el-button {
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s;
}

.el-button:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.report-content {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.content-text {
  white-space: pre-wrap;
  line-height: 1.6;
}

.el-descriptions {
  margin-bottom: 20px;
}

:deep(.el-descriptions__label) {
  width: 120px;
  font-weight: bold;
  background-color: #f5f7fa;
}

:deep(.el-descriptions__content) {
  padding: 12px 15px;
}

.dialog-footer {
  text-align: right;
  width: 100%;
  display: block;
  padding-top: 20px;
}


.report-dialog {
  :deep(.el-dialog__header) {
    margin-right: 0;
    padding: 20px;
    border-bottom: 1px solid #dcdfe6;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }

  :deep(.el-dialog__body) {
    padding: 30px 20px;
  }

  .report-form {
    .el-form-item {
      margin-bottom: 24px;

      :deep(.el-form-item__label) {
        font-weight: 500;
        color: #606266;
      }

      :deep(.el-textarea__inner) {
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.6;
        border-radius: 4px;

        &:focus {
          border-color: #409EFF;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }

        &::placeholder {
          color: #c0c4cc;
        }
      }
    }
  }
}

.dialog-footer {
  padding-top: 10px;
  text-align: right;

  .el-button {
    padding: 9px 20px;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      opacity: 0.85;
      transform: translateY(-1px);
    }

    & + .el-button {
      margin-left: 12px;
    }
  }
}

/* 设置滚动条样式 */
:deep(.el-textarea__inner::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.el-textarea__inner::-webkit-scrollbar-thumb) {
  background: #c0c4cc;
  border-radius: 3px;
}

:deep(.el-textarea__inner::-webkit-scrollbar-track) {
  background: #f5f7fa;
}.report-dialog {
  :deep(.el-dialog__header) {
    margin-right: 0;
    padding: 20px;
    border-bottom: 1px solid #dcdfe6;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }

  :deep(.el-dialog__body) {
    padding: 30px 20px;
  }

  .report-form {
    .el-form-item {
      margin-bottom: 24px;

      :deep(.el-form-item__label) {
        font-weight: 500;
        color: #606266;
      }

      :deep(.el-textarea__inner) {
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.6;
        border-radius: 4px;

        &:focus {
          border-color: #409EFF;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }

        &::placeholder {
          color: #c0c4cc;
        }
      }
    }
  }
}

.dialog-footer {
  padding-top: 10px;
  text-align: right;

  .el-button {
    padding: 9px 20px;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      opacity: 0.85;
      transform: translateY(-1px);
    }

    & + .el-button {
      margin-left: 12px;
    }
  }
}

/* 设置滚动条样式 */
:deep(.el-textarea__inner::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.el-textarea__inner::-webkit-scrollbar-thumb) {
  background: #c0c4cc;
  border-radius: 3px;
}

:deep(.el-textarea__inner::-webkit-scrollbar-track) {
  background: #f5f7fa;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: all 0.3s ease;

  i {
    margin-right: 6px;
    font-size: 14px;
  }


  &.status-pending {
    color: #e6a23c;
    background-color: #fdf6ec;
    border: 1px solid #faecd8;

    &:hover {
      background-color: #fef0de;
    }
  }


  &.status-success {
    color: #67c23a;
    background-color: #f0f9eb;
    border: 1px solid #e1f3d8;

    &:hover {
      background-color: #e7f6df;
    }
  }


  &.status-error {
    color: #f56c6c;
    background-color: #fef0f0;
    border: 1px solid #fde2e2;

    &:hover {
      background-color: #fee6e6;
    }
  }


  &.status-draft {
    color: #909399;
    background-color: #f4f4f5;
    border: 1px solid #e9e9eb;

    &:hover {
      background-color: #efefef;
    }
  }


  &.status-default {
    color: #409eff;
    background-color: #ecf5ff;
    border: 1px solid #d9ecff;

    &:hover {
      background-color: #e3effd;
    }
  }


  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
}


:deep(.el-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
